<template>
  <n-config-provider
    class="global-config-provider"
    :theme-overrides="theme"
    :locale="zhCN"
    :date-locale="dateZhCN"
  >
    <n-global-style />
    <n-loading-bar-provider>
      <n-message-provider>
        <n-modal-provider>
          <n-dialog-provider>
            <router-view></router-view>
          </n-dialog-provider>
        </n-modal-provider>
      </n-message-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import { NConfigProvider } from 'naive-ui';
import { zhCN, dateZhCN } from 'naive-ui';
import { generate } from '@ant-design/colors';
import { ref } from 'vue';

const theme = ref();
const primaryColor = ref('#165dff');
const colors = generate(primaryColor.value);

theme.value = {
  common: {
    primaryColor: primaryColor.value,
    primaryColorHover: colors[4],
    primaryColorPressed: colors[6],
    primaryColorSuppl: colors[4],
  },
  Menu: {
    itemIconColor: '#555',
  },
};
</script>

<style scoped>
.global-config-provider {
  height: 100%;
}
</style>
